<template>
	<div>
		<h1>{{ title }}</h1>
		<el-card>
			<el-button type="primary" @click="getIndexData" v-preventReClick="10000">
				点击请求数据
			</el-button>
			<div id="main" style="width: 800px; height: 500px; margin: 10px auto"></div>
		</el-card>
	</div>
</template>
<script>
export default {
  data () {
    return {
      prename: '张三',
      email: '',
      title: 'echarts演示',
      dataX: [],
      dataY: []
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 得到数据
    async getIndexData () {
      const result = await this.$ajax.post('/')
      console.log(result)
      const arr = result.data
      var arrY = []
      arr.forEach(function (item, index) {
        if (index >= 20) return
        for (var key in item) {
          arrY.push(item[key])
        }
      })
      this.dataY = arrY
      this.drawChart()
    }
  },
  drawChart () {
    var chartDom = document.getElementById('main')
    var myChart = this.$echarts.init(chartDom)
    var option
    option = {
      xAxis: {
        type: 'category',
        data: ['测试嘛', '可不是测试嘛']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.dataY,
        type: 'line'
      }]
    }
    option && myChart.setOption(option)
  }
}

</script>
<style scoped>
.body {
}
</style>
